import React from 'react';
import ReactDOM from 'react-dom';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import 'antd/dist/antd.css';
import './index.css';
const { Header, Content, Sider } = Layout;
const { SubMenu, ItemGroup } = Menu;

class AppMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            current: "userMgr",
        }
        this.handlerLick = this.handlerLick.bind(this);
    }

    handlerLick(e) {
        console.log(e);
        this.setState(
            {
                current: e.key,
            }
        )
        document.getElementById("contentIframe").src = "./public/"+e.key;
    }

    render() {
        return (
            <Layout className="layout">
                <Header className="header">
                    <div className="logo"></div>
                    <Menu
                        onClick={this.handlerLick}
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['userMgr']}
                        selectedkeys={[this.state.current]}
                        style={{ lineHeight: '64px' }}
                    >
                        <Menu.Item key="userMgr">用户管理</Menu.Item>
                        <Menu.Item key="eduMgr">教育教学</Menu.Item>
                        <Menu.Item key="rearMgr">后勤服务</Menu.Item>
                        <SubMenu title="系统管理">
                            <ItemGroup title="日志管理">
                                <Menu.Item key="loginLog">登录日志</Menu.Item>
                                <Menu.Item key="operationLog">操作日志</Menu.Item>
                            </ItemGroup>
                            <ItemGroup title="其他管理">
                                <Menu.Item key="systemInfo">系统信息</Menu.Item>
                                <Menu.Item key="systemGuid">操作指导</Menu.Item>
                            </ItemGroup>
                        </SubMenu>
                    </Menu>
                </Header>

                <Layout height="100%">
                    <Sider width={200}>
                        <Menu
                            onClick={this.handlerLick}
                            mode="inline"
                            defaultSelectedKeys={['userMgr_student']}
                            defaultOpenKeys={['userMgr_student']}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            <SubMenu key="userMgr_student" title="学生">
                                <Menu.Item key="userMgr_student_undergraduate.html">在校生</Menu.Item>
                                <Menu.Item key="userMgr_student_graduate.html">毕业生</Menu.Item>
                            </SubMenu>
                            <Menu.Item key="userMgr_teacher">教师</Menu.Item>
                            <Menu.Item key="userMgr_principal">校长</Menu.Item>
                            <Menu.Item key="userMgr_admin">管理员</Menu.Item>
                        </Menu>
                    </Sider>

                    <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
                        <iframe id="contentIframe" src="./public/userMgr_student_undergraduate.html" frameborder="0" width = "100%" height='100%'/>
                    </Content>

                </Layout>
            </Layout>
        )
    }
}

ReactDOM.render(<AppMenu />, document.getElementById('index'));